<template>
  <!--转供策略-->
  <el-row style="height: 48vh;margin-bottom: 20px">
    <el-table :data="feederData.slice((pager.pageNum - 1) * pager.pageSize, pager.pageNum * pager.pageSize)"
              style="width: 100%;--el-table-border-color: none;"
              :row-class-name="getClassName"
              :header-cell-style="customHeaderCell"
              :cell-style="customCell"
    >
      <el-table-column type="index" label="序号" align="center" width="80"/>
      <el-table-column prop="treated" align="center"  label="失电馈线"/>
      <el-table-column prop="target" align="center" label="转供馈线"/>
      <el-table-column prop="treatedPercent" align="center" :width="150" label="动作前负载率(%)"/>
      <el-table-column prop="targetPercent" align="center" :width="150" label="动作后负载率(%)"/>
      <el-table-column prop="recoverLoad" align="center" :width="150" label="恢复功率(MW)"/>
    </el-table>

      <div style="display: flex; justify-content: end;width: 100%">
      <el-pagination
          small
          background
          layout="total,prev, pager, next"
          :total="feederData.length"
          style="margin-top: 15px"
          @sizeChange="val => pager.pageSize = val"
          @currentChange="val => pager.pageNum = val"
      >
        <template #total="scope">
          共 {{ scope.total }} 条
        </template>
      </el-pagination>
    </div>
  </el-row>
  <el-row style="height: 40vh" :gutter="20">
    <el-col :span="6" >
      <ul class="warning-list">
        <li class="warning-title">预警信息</li>
        <li class="warning-item" v-for="(item,key) in waringMessageData" :key="key">
          <el-tooltip
              effect="light"
              :content="item"
              placement="top"
          >
         <span> {{ item }}</span>
          </el-tooltip>
        </li>
      </ul>
    </el-col>
    <el-col ref="chartFatherRef" :span="18">
      <div id="chart"></div>
    </el-col>

  </el-row>

</template>

<script setup>
import * as echarts from 'echarts';
import {ref, watchEffect} from 'vue';

const props= defineProps({
  feederData: Array,
  stationData: Object,
  waringMessageData: Array
})

const pager = ref({
  pageNum:1,
  pageSize:10,
})

const {feederData, stationData, waringMessageData} = props;

const chartFatherRef = ref(null);


const charts = async (data) => {
  const chartDom = document.getElementById('chart');

  const width = chartFatherRef.value?chartFatherRef.value.$el.offsetWidth:undefined;
  const height = chartFatherRef.value?chartFatherRef.value.$el.offsetHeight:undefined;
  // 获取加载图表的容器
  if (chartDom){
    const chart = echarts.init(chartDom, null, {
      width: width ,
      height: height,
      renderer: 'svg'
    });

  // 绘制echarts
  chart.setOption({
    title: {
      text: '电网统计量',
      left: "center",
      textStyle: {
        color: '#fff',
        fontSize: '14px'
      }
    },
    xAxis: {
      data: data.branch,
      axisLabel:{
        show:false
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
          opacity: 0.7
        }
      },
      dataZoom: [{
        type: 'slider', // 缩放条类型
        xAxisIndex: 0, // 对应的 x 轴索引
        start: 0, // 缩放起始位置（百分比）
        end: 100, // 缩放结束位置（百分比）\
        orient: 'horizontal', // 设置为横向
        inside: true // 在图表内部显示
      }],
      axisTick: {
        lineStyle: {
          color: '#fff',
          opacity: 0.2
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      // max: 100,
      axisLabel: {
        formatter: `{value} %`,
        color: '#fff',
      },
    },
    legend: {
      show: true,
      right: 'auto',
      top: '30',
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: "axis"
    },
    series: [
      {
        name: '动作前负载率',
        type: 'bar',
        data: data.before_percent,
        itemStyle: {
          color: '#5776a3'
        }
      },
      {
        name: '动作后负载率',
        type: 'bar',
        data: data.after_percent,
        itemStyle: {
          color: '#57a3a0'
        }
      }
    ]
  });
  }
}

watchEffect(() => {
  if (stationData.length !== 0) {
    charts(stationData,waringMessageData)
  }
})


const customHeaderCell = {
  color: '#fff',
  backgroundColor: "#2f4352",
  padding: '10px 0',
  fontSize: '14px',
  border: '1px solid #507e9c'
}

const customCell = {
  color: '#fff',
  padding: '6px 0',
  fontSize: '12px',
  border: '1px solid #507e9c'
}

const getClassName = ({rowIndex}) => {
  return rowIndex % 2 === 0 ? 'odd-row' : 'even-row'

}

defineExpose({
  charts
})
</script>

<style scoped lang="scss">
@import "@/assets/styles/el-table.scss";

.warning-list {
  border: 1px #325265 solid;
  border-radius: 2px;
  height:90%;
  margin: 0;
  overflow-y: auto;
  padding: 0 0 10px;

  .warning-title {
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    background-color: #325265;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
  }


  .warning-item {
    list-style: none;
    color: #fff;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0 14px;
    cursor: pointer;

    span{
      display: inline-block;
      width: 100%; /* 继承父元素宽度 */
      height: 100%; /* 继承父元素高度 */
      overflow: hidden;
      white-space: nowrap; /* 防止换行 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
  }
}
:deep(.el-pagination__total
){
  color: #fff !important;
}

:deep(.el-pager li) {
  background: #57a3a0 !important;
  color:#fff;
}
:deep(.el-pagination .btn-prev) {
  background: #57a3a0 !important;
  color:#fff !important;
}

:deep(.el-pagination .btn-next)  {
  background: #57a3a0 !important;
  color:#fff !important;
}
:deep(.el-pager li:hover) {
  color: #fff !important;
}
:deep(.el-pager .is-active){
  background: #07d5c0 !important;
}
</style>
